<!--
 * @docName: idCardUpload.vue
 * @Author: mwl
 * @Date: 9:40
 * @LastEditors: mwl
 * @LastEditTime: 9:40
-->
<template>
  <div class='content-main'>
    <a-form-model ref="form" :rules="rules" :model="checkChannelLegal" class="password-retrieval-form">
      <div class="input-info">
        <h2>上传企业法人证件</h2>
        <a-form-model-item label="法人姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
          <span type="text" v-if='checkChannelLegal'>
            <span>{{ checkChannelLegal.legalName }}</span>
            <span v-show='lockShow'>--</span>
            <span v-show='lockShow' style='color: #cc0000'>{{channelData.businessLicenseVo&&channelData.businessLicenseVo.entLegal || ''}}</span>
          </span>
          <span v-else>{{channelData.businessLicenseVo&&channelData.businessLicenseVo.entLegal||''}}</span>
        </a-form-model-item>
        <a-form-model-item label="身份证" :label-col="{ span:3}" :wrapper-col="{ span: 20 }">
          <!-- <UpLoadFile ref="qyfzrxx_sfz" :config="sfzConfig" :fileChangeEvent="(type,fileData)=>{fileChangeEvent(type,fileData)}"></UpLoadFile> -->
          <p-UpLoadFile ref="qyfzrxx_sfz" :config="sfzConfig" v-model="objSfz" :showHelp="false" :customRequestEvent="PUpLoadFileCustomRequestEvent"></p-UpLoadFile>

        </a-form-model-item>
        <a-form-model-item label="身份证号" prop="legalCard" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input :disabled='disabled' v-model="checkChannelLegal.legalCard" type="text" />
        </a-form-model-item>
        <a-form-model-item label="有效期" prop="cardTerm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input :disabled='disabled' type="text" v-model="checkChannelLegal.cardTerm" />
        </a-form-model-item>
      </div>
      <a-form>
        <a-form-item :wrapperCol="{span: 3, offset: 3}">
          <!--        <a-button @click="prevStep">上一步</a-button>-->
          <a-button
            v-if='!sfzConfig.readonly'
            type="primary"
            :loading="registerBtn"
            htmlType="submit"
            @click.stop.prevent="nextStep"
            :disabled="registerBtn"
          >下一步</a-button>
          <a-button type="link" @click='skipEvent' style='margin-left: 10px'>
            跳过
          </a-button>
        </a-form-item>
      </a-form>
    </a-form-model>
  </div>
</template>

<script>
import uploadFiles from '@/views/common/uploadFiles'
import { getVerifyOcrIDCard } from '@api/api'
import { getCheckBusinessLicense, getCheckChannelLegal } from '@api/register'

const config = {
  // 此参数必填  上传路径
  dir: "/qsb/idCard/",
  // 单文件 多文件 身份证  all   ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
  model: "身份证",
  // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
  showBG: true,
  // 此参数选填  表示是否可编辑
  readonly: false,
  // 提示信息
  tips:{
    card1: '身份证人像面',
    card2: '身份证国徽面',
  },
  // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
  // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
  // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
  required: true,
  // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
  defaultFileList: {
    card1: {},
    card2: {},
  },
  // 此参数集必填
  fielConfig: {
    // 允许上传的文件类型 当为空时表示不限制  默认为空
    //    可供选择类型：
    //          图片('jpg', 'png', 'jpeg')
    //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
    //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
    //          PDF(pdf)
    //          委托代征协议('pdf','jpg', 'png', 'jpeg')
    //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
    // eg:
    //    当值为string类型时，对所有（card1,card2,card3）的有效；
    //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
    type: "图片",
    // 允许上传的文件个数  默认值为1
    // eg: 1 表示只允许上传1个文件；
    //      当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
    size: 1,
    // 上传的单个文件大小 单位为 MB  默认值为1
    //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
    //        当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
    singleFileSize: 10,
  },
}

export default {
  name: 'idCardUpload',
  components:{
    uploadFiles
  },
  props:['channelData'],
  data () {
    return {
      lockShow:false,
      orcObj:{},
      fileObjz:{},
      fileObjf:{},
      disabled:true,
      registerBtn:false,
      checkChannelLegal:{},
      labelCol: { span:3},
      wrapperCol: { span: 10 },
      rules:{
        legalCard: [{ required: true, message: '请填写身份证号!' }],
        cardTerm: [{ required: true, message: '请填写有效期!' }],
      },
      objSfz:{},
      sfzConfig:config,
      sfzConfig1: {
        readonly: false,  // 用于标记是否是可编辑的 此参数可选   默认值 false 表示可编辑   true 表示只读，不可编辑
        dir:'/qsb/idCard/', // 上传文件的地址
        required:true, // 文件上传必填校验 默认为false 不校验   当值为true时进行强制校验
        // multiple:false, // 优先级高于isTwo  开启多文件上传  默认值为false   当值为true时表示开启对文件上传，同时 isTwo 和 upLoadCardListConfig 失效
        // isTwo:true, // 是否开启两个卡片上传 默认为false  表示只启用单个卡片单文件上传   true 表示开启两个卡片的单文件上传
        showCardList:['card1','card2'],
        upLoadCardListConfig:[
        // http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/idCard/1677582471983_%E8%B0%A2%E6%80%BB%E6%AD%A3.png
          {type:'1',tips:'身份证人像面',fileInfo:{name:'正面.png',url:''}},
          // http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/idCard/1677582475631_%E8%B0%A2%E6%80%BB%E8%83%8C%E9%9D%A2.png
          {type:'1',tips:'身份证国徽面',fileInfo:{name:'背面.png',url:''}}
        ], // 此项最多可以传两组值 {type:'1',tips:'身份证人像面',backgroundPic:''},
        fielConfig:{
          type:'图片', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
          size: 2, // 允许上传的文件个数  默认值为1
          singleFileSize: 10, //上传的单个文件大小 单位为 MB  默认值为1
        }
      },
    }
  },
  created() {
  },
  watch:{
    channelData:{
      handler(val) {
        this.channelData = val;
        if(val.channelLegalVo){
          this.sfzConfig.readonly = true;
        }
        if (this.channelData.channelLegalVo) {
          this.checkChannelLegal = this.channelData.channelLegalVo;
          this.sfzConfig.defaultFileList.card1 = {url:this.checkChannelLegal.cardFrontUrl,name:''};
          this.sfzConfig.defaultFileList.card2 ={url:this.checkChannelLegal.cardBackUrl,name:''} ;
        }
      }
    },
    objSfz:{
      handler(val){
        let params ={};
        params.cardFrontUrl = val.card1.url;
        params.cardBackUrl = val.card2.url;
        if(params.cardFrontUrl && params.cardBackUrl){
          this.getBusinessLicenseOcrFun(params);
        }
      },
      deep:true
    }
  },
  methods:{
    confirm() {

      let mesg = ''
      if(this.channelData.channelLegalVo && this.channelData.channelLegalVo.createBy && this.channelData.channelLegalVo.legalName){
        mesg = `上传 ${this.channelData.channelLegalVo.createBy} 法人 ${this.channelData.channelLegalVo.legalName} 的身份证件，谢谢！`
      }else {
        mesg = `您上传的身份证照片不能被识别或图片有误，请重新选择后重试！`
      }
      this.$confirm({
        title: '身份信息不匹配！',
        content: mesg,
        okText: '确认',
      });
    },
    /**
     * 废弃
     * @param {*} type
     * @param {*} files
     */
    fileChangeEvent(type,files){
      this.fileObjf = files;
      console.log('fileChangeEvent ======>',type,files)
      let qyz = this.$refs['qyfzrxx_sfz'].getData() // [{name:'',url:''}]
      if(qyz.length==2){
        this.objSfz.shenfenz = qyz[1].url
        this.objSfz.shenfenf = qyz[0].url
      }

    },
    getBusinessLicenseOcrFun(params){
      getVerifyOcrIDCard(params).then(res => {
        if(res.success){
          this.checkChannelLegal = {
            cardAddress:res.result.address,
            cardFrontUrl:this.objSfz.card1.url,
            cardBackUrl:this.objSfz.card2.url,
            cardBirth:res.result.birthday,
            cardNation:res.result.race,
            cardPolice:res.result.issuedBy,
            cardSex:res.result.cardSex,
            cardTerm:res.result.validate,
            legalCard:res.result.idcardNum,
            legalName:res.result.realName,
            agreeId:this.channelData.agreeInfoVo.id,
            channelId:this.channelData.agreeInfoVo.masterId
          }
          this.lockShow = false;
          if(this.channelData.businessLicenseVo&&this.channelData.businessLicenseVo.entLegal && res.result.realName){
            if(this.channelData.businessLicenseVo&&this.channelData.businessLicenseVo.entLegal != res.result.realName){
              this.lockShow = true;
            }
          }
        }else{
          this.confirm()
        }

      })
    },
    nextStep(){
      let params = {};
      params = this.checkChannelLegal;
      this.$refs.form.validate(valid => {
        if (valid) {
          getCheckChannelLegal(params).then((res) => {
            if(res.success){
              this.$emit('processTypeFun',3);
            }else{
              if(this.channelData.channelLegalVo){
                this.confirm();
              }else{
                this.$message.warning(res.message);
              }
            }
          })
        } else {
          this.confirm();
          return false;
        }
      });

    },
    skipEvent(){
      this.$router.push({
        path: '/registerProcess/submitSuccess'
      })
    }
  }
}
</script>

<style scoped lang='less'>


</style>
